<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>循环</title>
</head>
<body>
    
</body>
<script>
    // for ...in
    var arr = [12,23,34,45,56,67,78,89]
    for(var i in arr){
        console.log(arr[i]);
        console.log(typeof arr[i]);
    }

    // for of 
    let str = 'abcd'
    console.log(str.length);
    for(let i of str){
        if(i=='b'){
            continue
        }
        if(i=='d'){
            break
        }
        console.log(i);
    }
    for(let i of arr){
        if(i==23){
            continue
        }
        if(i==67){
            break
        }
        console.log(i);
    }
    let s1 = new Set([12, 23, 34, 45, 56]);
console.log(s1.size);
for(let item of s1){
    if(item == 23) {
        continue;
    }
    if(item == 45) {
        break;
    }
    console.log('item', item, '= item 的类型 = ', typeof item);
}


// while (判断条件) { 条件满足时重复执行的代码 }

var i = 1;				// 第一步：初始值
while(i <= 10){			// 第二步：条件判断
    // if(i == 2) {
    //     continue;  // 不能在第四步改变初始值的之前写 continue，不然会陷入死循环
    // }
    if(i == 6) {
        break;
    }
    console.log('i', i, '= i 的类型 = ', typeof i);		// 第三步：条件满足时执行的代码
    i++;				// 第四步：改变初始值
    if(i == 2) {
        continue;  // 在这里写的continue 没有意义，因为代码执行到这里的时候本就会继续执行下去
    }
}
//  do {
//     重复执行的代码
// } while (条件)
// var i = 1			// 1. 初始化变量
//     do {
//       console.log(i)	// 3. 重复执行的代码
//       i++				// 4. 改变自身
//     } while (i < 10)	// 2. 条件判断


//     do {
//    // 把 改变自身 和 执行代码变成一句话了
//     var res = confirm('你爱不爱我 ? ')
// } while (res === false) // 只要用户点击的取消, 就再执行一遍 do


// forEach
// forEach() 循环不能使用 break； 不能使用 continue，想要实现 continue 的效果可以使用
// return 替代；
var arr = [5, 12, 18, 19, 20, 90]; 
var newArr = arr.forEach((item, index, currArr) => {
    // if(index == 2) {
    //     continue; 
    //     // 不能使用 continue，
    //     // 会报错：Illegal continue statement: no surrounding iteration statement（非法的continue语句:没有周围的迭代语句）
    //     // 想要实现 continue的效果，可以使用 return；
    // }
    if(index == 4) {
        // break; // 不能使用break，报错：Uncaught SyntaxError: Illegal break statement（非法break语句）
        return; // 这个return 不能结束循环，只能结束当前循环，与 continue 的效果一样；
    }
    console.log('item', item);
    console.log('index', index, 'index 类型', typeof index);
    console.log('currArr', currArr);
});
console.log('newArr', newArr); 
console.log(arr);     // 打印原数组 [6, 13, 19, 20, 21, 91]

console.log('-------*****************************---------');
// map
var arr = [5, 12, 18, 19, 20, 90]; 
var newArr = arr.map((item, index, currArr) => {
    // if(index == 2) {
        // continue; 
    //     // 不能使用 continue，
    //     // 会报错：Illegal continue statement: no surrounding iteration statement（非法的continue语句:没有周围的迭代语句）
    //     // 想要实现 continue的效果，可以使用 return；
    // }
    if(index == 4) {
        // break; // 不能使用break，报错：Uncaught SyntaxError: Illegal break statement（非法break语句）
        return 321; // 这个return 也不是结束循环，只是在满足当前条件时，给map循环返回值的新数组中加入此返回值，效果也和continue 类似；
    }
    console.log('item', item);
    console.log('index', index, 'index 类型', typeof index);
    console.log('currArr', currArr);
    return item+1;
});
console.log('newArr', newArr);    // 打印返回值 [6, 13, 19, 20, 21, 91] 
console.log(arr);     // 打印原数组 [5, 12, 18, 19, 20, 90]


console.log('---------------************************-------------');
// filter
var arr = [5, 12, 18, 19, 20, 90]; 
var newArr = arr.filter((item, index, currArr) => {
    // if(index == 2) {
    //     continue; 
    //     // 不能使用 continue，
    //     // 会报错：Illegal continue statement: no surrounding iteration statement（非法的continue语句:没有周围的迭代语句）
    //     // 想要实现 continue的效果，可以使用 return；
    // }
    if(index == 4) {
        // break; // 不能使用break，报错：Uncaught SyntaxError: Illegal break statement（非法break语句）
        return; // 这个return 不能结束循环，只能结束当前循环，与 continue 的效果一样；
    }
    console.log('item', item);
    console.log('index', index, 'index 类型', typeof index);
    console.log('currArr', currArr);
    return item >= 18;
});
console.log('newArr', newArr);     // 打印返回值 [18, 19, 90]
console.log(arr);    // 打印原数组 [5, 12, 18, 19, 20, 90]
console.log('---------------************************-------------');
let objArr = [
     { name: '小花', type: ''},
     { name: '大黄', type: 'dog'} 
];  
let newArr1 = objArr.map( item => {
	 if(item.type) {
	     item.age = 24;
	     return item;
	 } 
}); 
console.log('newArr1', newArr1); 
for(let i = 0; i < newArr1.length; i++) {
	console.log(newArr[i].age); 
}

// 
console.log('---------------************************-------------');
let list = []
for (let i = 0; i < 3; i++) {
    let item = {
        a: 1,
        b: 2,
    }
    list.push(item)
}
console.log("list", list);

let arr3 = list.map( (item, index) => {
    if(index == 2){
        item.is = true;
    }
    return item;
})
console.log('arr3', arr3);
// let newarr = []
let newarr2 = arr3.filter( item => {
    let obj = {}
    if(item.is) {
        obj.c = item.a;
        // newarr.push(obj);
        return obj;
    }
})
console.log('newarr2', newarr2);

// 
let numbers = [...Array(10).keys()].slice(1);
console.log(...Array(10).keys());

console.log([...Array(10).keys()].slice(1));
numbers.map((value) => {
    let i = 0;
    let output = [];
    while (i++ < value) {
        
        output.push(`${i} * ${value} = ${value * i}`);
        
    }
    console.log(output.join('\t'));
})
 console.log('---------------************************-------------');
 var arr4 = new Array(10);
 for(var i=1;i<arr4.length;i++){
    arr4[i]=i
 }
 console.log(arr4);
 var arr5 = arr4.filter(item=>{
    return item>=1
 })
 console.log(arr5);
arr5.map(value =>{
    let i=0
    let arr6 = []
    while (i++ < value) {
        
        arr6.push(`${i} × ${value} = ${value * i}`);
        
    }
    console.log(arr6.join('\t'));

    // console.log(arr6.join('\t'));
})
 



</script>
</html>